<template>
	<view class="download">
		<uni-popup ref="popup" type="center" :maskClick="!isForceUpgrade">
			<view class="upgrade">
				<view class="logo">
					<view class="title">发现新版本</view>
					<view>
						<text class="version">V{{verInfo.versionName}}</text>
						<text class="size">{{verInfo.fileSize}}</text>
					
					</view>
					
				</view>
				<view class="content">
					<view class="container">
						<view class="descriptions">
							<text>{{upgrading?'正在为您下载,请耐心等待':'本次版本更新描述内容:'}}</text>
						</view>
						<scroll-view scroll-y :show-scrollbar="true" class="details" v-if="!upgrading">
							<text>
								{{verInfo.upDesc}}
							</text>
						</scroll-view>
						<view v-else class="prpgroess">
							<progress :percent="progress" active-mode="forwards" activeColor="red" active stroke-width="4" show-info />
						</view>
					</view>
					<view v-if="!upgrading" class="btn-group">
						<view v-if="!isForceUpgrade" class="cancel" @click="hiddenUppop">
							<text>取消</text>
						</view>
						<view class="confirm" @click="upgradeEvent">
							<text>确认</text>
						</view>
					</view>
					<view v-else class="btn-group">
						<view v-if="!isForceUpgrade" class="cancel" @click="abortDownload">
							<text>取消下载</text>
						</view>
						<view class="confirm" @click="hiddenUpgradeEvent">
							<text>后台下载</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "./uni-popup/uni-popup.vue";
	import systemAPI from "@/api/system.js"
	import {getVersion,appRestart,appPlatform,install,compareVer,jumpTo,delay} from "@/utils/util.js"
	import {downloadFile} from "@/utils/file.js"
	let abrogate = null;
	const paltInt =(platform)=>{
		if(platform.toLowerCase()=='android'){
			return 1
		}else if(platform.toLowerCase()=='ios'){
			return 2
		}
	}
	export default {
		data: () => ({
			
			upgrading: false,
			
			progress: 0,
			
			isForceUpgrade: true,
			platform:'',
			
			verInfo:{}
		}),
		
		components: {
			uniPopup
		},
		async created() {
			// #ifdef APP-PLUS
			
			
			
			
			
				
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			// #endif
		},
		mounted() {
			this.check()
		},
		methods: {
			async check(){
				try{
					const {version:localVer,versionCode} = await getVersion();
					console.log(localVer,versionCode)
					const platform = appPlatform();
					this.platform = platform;
					const verInfo = await systemAPI.latestVersion({type:paltInt(platform),version:versionCode});
			console.log(JSON.stringify(verInfo, null, 2));
					if(!verInfo){
						throw new Error('获取最新版本为空')
					}
					this.verInfo = verInfo;
					this.isForceUpgrade = !!verInfo.forceUpdate;
					return{
						needUp:compareVer(verInfo.versionName,localVer),
						lastVersion:verInfo
					}
				}catch(e){
					return{
						needUp:false,
						lastVersion:null
					}
				}
			},
			
			hiddenUppop() {
				this.$refs.popup.close();
			},
			
			upgrade() {
				this.$refs.popup.open();
			},
			
			async upgradeEvent() {
				if(paltInt(this.platform)==2&&this.verInfo.updateType==1){
					return plus.runtime.openURL(this.verInfo.apkUrl);;
				}
				try{
					this.upgrading = true;
					console.log(this.verInfo.apkUrl)
					const filePath = await downloadFile({url:this.verInfo.apkUrl,onProgressUpdate:({progress},abort)=>{
						abrogate = abort;
						this.progress = progress
					}})
					console.log(filePath)
					this.$refs.popup.close();
					await install(filePath)
					if(this.verInfo.updateType==2){
						appRestart()
					}
				}catch(e){
					console.log("更新失败")
				}finally{
					this.upgrading = false;
				}
			},
			
			hiddenUpgradeEvent() {
				this.$refs.popup.close();
			},
			
			abortDownload() {
				!!abrogate&&abrogate();
				this.upgrading = false;
			}
		}
	};
</script>

<style scoped >
	.download .logo {
		width: 100%;
		height: 200rpx;
		background-image: url("./img/upgrade.png");
		background-size: 100% auto;
		position: absolute;
		top: -120rpx;
		padding-left:40rpx;
		
	}
	.logo .title{
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;	
		margin-top:50rpx;
		margin-bottom: 10rpx;
	}
	.logo .version,.logo .size{
		color: #FFFFFF;
		font-size: 20rpx;
	}
	.logo .size{
		margin-left: 1em;
	}
	.download .upgrade {
		position: relative;
		background: #fff;
		width: 468rpx;
		min-height: 238rpx;
		border-radius: 20rpx;
	}
	.download .content {
		padding-top: 80rpx;
	}

	.download .content .container {
		margin: 20rpx 0;
		color: #666;
	}

	.download .content .container .descriptions {
		padding: 0rpx 30rpx;
		text-align: center;
		overflow: hidden;
		font-size: 28rpx;
	}
	.download .content .container .details{
		max-height: 220rpx;
	}
	.download .content .container .details,
	.download .content .prpgroess {
		padding: 16rpx 46rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}

	.download .content .prpgroess {
		padding: 16rpx 22rpx;
		margin: 20rpx 0;
	}

	.download .content .btn-group {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.download .content .btn-group view {
		height: 68rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 14rpx;
		font-size: 24rpx;
		border-radius: 16rpx;
		line-height: 1.5;
		flex: 1;
	}

	.download .content .btn-group view:last-child {
		background: #ef5656;
		color: #fff;
	}
	
</style>
